﻿import { Component, Input, OnInit} from '@angular/core';
import {Hero}from './hero';
import { ActivatedRoute, Params} from '@angular/router';
import { Location  }from '@angular/common';
import { HeroService} from './hero.service';

@Component({
    selector: 'my-hero-detail',
    moduleId: module.id,
    //template: `
    //    <div *ngIf="hero">
    //        <h2>{{hero.name}} detials</h2>
    //        <div><label>id:</label>{{hero.id}}</div>
    //        <div>
    //            <label>name:</label>
    //            <input [(ngModel)]="hero.name" placeholder="name"/>
    //        </div>
    //    </div>
    //    <button (click)="goBack()">Back</button>
    //`
    templateUrl: 'hero-detail.component.html',
    styleUrls: ['hero-detail.component.css']

})

export class HeroDetailComponent implements OnInit {
    constructor(
        private heroService: HeroService,
        private route: ActivatedRoute,
        private location: Location
    ) { }
    @Input()
    hero: Hero;
    ngOnInit(): void {
        this.route.params
            .forEach((p: Params) => {
                let id = +p["id"];
                //+操作符表示转换为number类型。
                this.heroService.getHero(id)
                    .then(hero => this.hero = hero);
            });
    }
    goBack(): void {
        this.location.back();
    }
    save(): void {
        this.heroService.update(this.hero)
            .then(() => this.goBack());
    }
}
